<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bmob Docs</title>
    <!-- Global CSS -->
    <link rel="shortcut icon" href="../img/favicon.ico">
    <link rel="stylesheet" href="bootstrap.min.css">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .hidden-scroll {
            overflow: hidden;
        }

        .navbar-brand, .navbar-brand:hover {
            color: #FFF !important;
            background: #58bbee !important;
            display: block;
        }

        .navbar {
            border: none !important;
        }

        .tab-content {
            margin-top: 50px
        }

        .bs-docs-header {
            position: relative;
            padding: 30px 0;
            color: #ffffff;
            text-align: center;
            text-shadow: 0 1px 0 rgba(0, 0, 0, .1);
            background-color: #494d55;
        }

        .mod-chapters .chapter {
            border-bottom: 1px solid #d9dde1;
            padding: 0 24px 12px;
        }

        .mod-chapters .chapter h3 {
            position: relative;
            height: 53px;
            line-height: 65px;
            font-size: 16px;
            color: #07111b;
            font-weight: 700;
        }

        .mod-chapters .chapter .video li>div {
            position: relative;
            height: 40px;
            line-height: 40px;
            padding-left: 8px;
            background-color: #f3f5f7;
            margin-bottom: 8px;
            cursor: pointer;
        }

        .mod-chapters .chapter .video li>div:hover {
            background-color: #58bbee;
        }
.mod-chapters .chapter .video li{
 list-style: none; position: relative;
}
.mod-chapters .chapter .video li::after{
content: "●"; position: absolute; left: -20px; top: 8px;
}
        .mod-chapters .chapter .video li a {
            color: #787d82;
        }

        .mod-chapters .chapter .video li>div:hover a {
            color: #FFF;
        }
        .mod-chapters .chapter .video li>div+p {
           color: #999;
        }
        .mark {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, .9);
            z-index: 4999
        }

        .video-wrap {
            width: 960px;
            height: 640px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .video-close {
            width: 75px;
            height: 75px;
            background: #333;
            position: absolute;
            top: 0;
            right: -75px;
            color: #FFF;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        .toBlili {
            width: 75px;
            height: 75px;
            background: #333;
            position: absolute;
            top: 85px;
            right: -75px;
            color: #FFF;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        .title {
            position: absolute;
            top: -50px;
            left: 0;
            color: #FFF;
            font-size: 32px;
        }
    </style>
</head>
<body>

<div class="navbar navbar-inverse navbar-fixed-top" style="margin: 0">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <span class="navbar-brand hidden-sm">Bmob视频教程</span>
        </div>
        <div class="navbar-collapse collapse" role="navigation">
            <ul class="nav navbar-nav" role="tablist"></ul>
        </div>
    </div>
</div>

<div class="tab-content"></div>


<div class="mark" style="display: none">
    <div class="video-wrap">
        <div class="video-close">
            <span>
            <svg t="1508917936580" class="icon" style="" viewBox="0 0 1024 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg" p-id="3711" xmlns:xlink="http://www.w3.org/1999/xlink" width="40"
                 height="40"><defs><style type="text/css"></style></defs><path
                    d="M577 512l369.6-369.5c17.9-18 17.9-47.1 0-65-17.9-18-47-18-65 0L512 447 142.4 77.4c-17.9-17.9-47-17.9-65 0-17.9 18-17.9 47.1 0 65L447 512 77.5 881.5c-17.9 17.9-17.9 47.1 0 65s47 18 65 0L512 577l369.6 369.6c17.9 18 47 18 64.9 0 17.9-18 17.9-47.1 0-65L577 512z"
                    fill="#999" p-id="3712"></path></svg>
            </span>
        </div>
        <div class="toBlili">
          <a href="#">B站播放</a>
        </div>
        <div class="title">Bmob视频教程</div>
        <iframe id="video" src="" width="100%" height="100%" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
    </div>
</div>


<!-- Main Javascript -->
<script type="text/javascript" src="http://doc.bmob.cn/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://doc.bmob.cn/js/bootstrap-3.0.3.min.js"></script>
<script type="text/javascript" src="data.js"></script>
<script>
    $(function () {
        var mark = $('.mark');
        var video = $('#video');
        var close = $('.video-close');
        var body = $('body');

        function details(data) {
            var content = '';
            for (var i = 0; i < data.length; i++) {
                content +='<div class="chapter chapter-active">' +
                    '<h3>' +
                    '<span class="icon-drop_down .js-open js-open"></span>' +
                    '<strong>' +
                    data[i].title +
                    '</strong>' +
                    '</h3>' +
                    '<ul class="video">' +
                        sub(data[i].chapter) +
                    '</ul>' +
                    '</div>'
            }
            function sub(item) {
                var li = '';
                for(var i = 0; i< item.length; i++ ){
                 var datail = item[i].detail == undefined ? "" : item[i].detail;
                    li+='<li>'+
                    '<div data-media-id="'+ item[i].id +'"  data-media-blibli="'+ item[i].bilibili +'" style="overflow:hidden">'+
                        '<a class="J-media-item">'+
                            item[i].title +
                        '</a>'+
						'<span style="float: right; margin-right: 20px;">['+item[i].time+']</span>'+
                    '</div>'+
                    '<p>'+ datail +'</p>'
                        '</li>'
                }
                return li;
            }
            return content
        }

        var content = "",li = "",hash;
        var hashVal = parseInt(window.location.hash.substring(1));
        if(isNaN(hashVal) || hashVal>data.length || hashVal<0){
            hash = 0
        }else{
            hash = hashVal
        }
        for(var i = 0; i<data.length; i++){
            var active = hash == i ? 'active' : '';
            li += '<li class="'+ active +'"><a href="#'+ data[i].id +'" aria-controls="'+ data[i].id +'" role="tab" data-index="'+i+'" data-toggle="tab">'+ data[i].title +'</a></li>';
            content += '<div role="tabpanel" class="tab-pane '+ active +'" id="'+ data[i].id +'">' +
                '        <div class="bs-docs-header">' +
                '            <div class="container text-left">' +
                '                <h2>'+ data[i].title +'SDK视频教程</h2>' +
                '                <p>Bmob平台为您的移动应用提供了一个完整的后端解决方案，我们提供轻量级的SDK开发包，让开发者以最小的配置和最简单的方式使用Bmob平台提供的服务，进而完全消除开发者编写服务器代码以及维护服务器的操作。</p>' +
                '            </div>' +
                '        </div>' +
                '        <div class="container">' +
                '            <div class="mod-chapters">'+
                details(data[i].data) +
                '</div>' +
                '        </div>' +
                '    </div>'
        }

        $('.tab-content').html(content);
        $('.nav.navbar-nav').html(li);

        $('.video li>div').on('click',function () {
            body.addClass('hidden-scroll');
            var id = $(this).data('media-id');
            var blibli = $(this).data('media-blibli');
            var title = $(this).find('a').html();
            $('.toBlili a').attr('href',blibli);
            video.prev('.title').html(title);
            video.attr('src', 'http://player.youku.com/embed/' + id);
            setTimeout(function () {
                mark.fadeIn();
            },300);
        });
        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            window.location.hash = $(this).data('index');
        });

        close.click(function () {
            video.attr('src', '');
            mark.fadeOut();
            body.removeClass('hidden-scroll');
        });

    })
</script>
</body>
</html>
